<template>
  <section class="component case-group-chart">
    <common-title title="业绩监控表">
      <el-select slot="append" v-model="model.overduePeriod" placeholder="请选择" clearable>
        <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
      </el-select>
    </common-title>
    <ve-line height="450px" legend-position="bottom" :data="caseAmountChart.data" :settings="caseAmountChart.setting"></ve-line>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { VeLine } from "v-charts";
import CaseTypeSelect from "~/components/dashboard/case-type-select.vue";
import { dashboardQueryType, dashboardTimeType } from "~/config/enum.config";
import { CommonService } from "~/utils/common.service";
import CommonTitle from "~/components/common/common-title.vue";

@Component({
  components: {
    VeLine,
    CommonTitle
  }
})
export default class CaseGroupChart extends Vue {

  private model: any = {
    overduePeriod: ''
  }

  private caseAmountChart = {
    data: {
      columns: ['date', 'goalRate', 'actualRate'],
      rows: new Array()
    },
    setting: {
      metrics: ['goalRate', 'actualRate'],
      dimension: ['date'],
      yAxisName: ['回收率：%'],
      labelMap: {
        date: '日期',
        goalRate: '目标回收率',
        actualRate: '实际回收率',
      }
    }
  }

  private mounted() {
    const rows: any[] = []
    for (let i = 1; i < 31; i++) {
      rows.push({ date: '12/' + i, goalRate: 95, actualRate: 87 })
    }
    this.caseAmountChart.data.rows = rows
  }

}
</script>

<style lang="less" scoped>
</style>
